﻿<common:LayoutAwarePage
    x:Name="pageRoot"
    x:Class="Expenses.Views.ExpenseReportPage"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    IsTabStop="false"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Expenses"
    xmlns:common="using:Expenses.Common"
    xmlns:controls="using:Expenses.Controls"
    xmlns:telerik="using:Telerik.UI.Xaml.Controls"
    xmlns:converters="using:Expenses.Converters" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>
        <CollectionViewSource x:Name="ExpenseItemsViewSource"/>
        <CollectionViewSource x:Name="ExpenseReportViewSource"/>

        <converters:DateTimeToStringConverter x:Key="DateTimeToStringConverter"/>
        <converters:DoubleToCurrencyStringConverter x:Key="DoubleToCurrencyStringConverter"/>
        <converters:CategoryToStringConverter x:Key="CategoryToStringConverter"/>
        <converters:OtherCategoryToStringConverter x:Key="OtherCategoryToStringConverter"/>
        <converters:ExpenseTypeToStringConverter x:Key="ExpenseTypeToStringConverter"/>

        <DataTemplate x:Key="ExpenseItemTemplate">
            <Grid Background="{StaticResource ItemTemplateBackgroundColor}" 
                  Margin="10,0,0,0"
                  Height="135"
                  Width="510" >
                <Grid.RowDefinitions>
                    <RowDefinition Height="25"/>
                    <RowDefinition Height="25"/>
                    <RowDefinition Height="25"/>
                    <RowDefinition Height="25"/>
                    <RowDefinition Height="25"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="250"/>
                    <ColumnDefinition Width="250"/>
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Row="0" 
                           Grid.Column="0"
                           Margin="10,0,0,0"
                           Text="{Binding ExpenseDate, Converter={StaticResource DateTimeToStringConverter}}" 
                           Foreground="White"
                           Style="{StaticResource AppTitleTextStyle}" />
                <TextBlock Grid.Row="1" 
                           Grid.Column="0"
                           Margin="10,0,0,0"
                           Text="{Binding Merchant}" 
                           Foreground="White"
                           Style="{StaticResource AppTitleTextStyle}" />
                <TextBlock Grid.Row="2" 
                           Grid.Column="0"
                           Margin="10,0,0,0"
                           Text="{Binding Location}" 
                           Foreground="White"
                           Style="{StaticResource AppTitleTextStyle}" />
                <TextBlock Grid.Row="3" 
                           Grid.Column="0"
                           Margin="10,0,0,0"
                           Text="{Binding BilledAmount, Converter={StaticResource DoubleToCurrencyStringConverter}}" 
                           Foreground="White"
                           Style="{StaticResource AppTitleTextStyle}" />
                <TextBlock Grid.Row="4" 
                           Grid.Column="0"
                           Margin="10,0,0,0"
                           Text="{Binding ExpenseType, Converter={StaticResource ExpenseTypeToStringConverter}}" 
                           Foreground="White"
                           Style="{StaticResource AppTitleTextStyle}" />
                <TextBlock Grid.Row="0" 
                           Grid.Column="1"
                           Text="{Binding Description}" 
                           Foreground="White"
                           Style="{StaticResource AppTitleTextStyle}" />
                <StackPanel Grid.Row="1" 
                            Grid.Column="1"
                            Orientation="Horizontal">
                    <TextBlock Text="{Binding Category, Converter={StaticResource CategoryToStringConverter}}" 
                               Foreground="White"
                               Style="{StaticResource AppTitleTextStyle}" />
                    <TextBlock Text="/"
                               Margin="10,0,0,0"
                               Foreground="White"
                               Style="{StaticResource AppTitleTextStyle}" />
                    <TextBlock Text="{Binding AccountNumber, Converter={StaticResource OtherCategoryToStringConverter}}" 
                               Foreground="White" 
                               Style="{StaticResource AppTitleTextStyle}" 
                               Margin="10,0,0,0"/>
                </StackPanel>
                <TextBlock Grid.Row="2" 
                           Grid.Column="1" 
                           Grid.RowSpan="2"
                           Text="{Binding Notes}" 
                           Foreground="White"
                           Style="{StaticResource AppTitleTextStyle}" />
            </Grid>
        </DataTemplate>

        <DataTemplate x:Key="ExpenseItemSnappedTemplate">
            <Grid Background="#FF94BAF0" 
                  Margin="10,0,0,0"
                  Height="210"
                  Width="260" >
                <Grid.RowDefinitions>
                    <RowDefinition Height="25"/>
                    <RowDefinition Height="25"/>
                    <RowDefinition Height="25"/>
                    <RowDefinition Height="25"/>
                    <RowDefinition Height="25"/>
                    <RowDefinition Height="25"/>
                    <RowDefinition Height="50"/>
                </Grid.RowDefinitions>
                <TextBlock Grid.Row="0" 
                           Margin="10,0,0,0"
                           Text="{Binding ExpenseDate, Converter={StaticResource DateTimeToStringConverter}}" 
                           Foreground="White"
                           Style="{StaticResource AppTitleTextStyle}" />
                <TextBlock Grid.Row="1"
                           Margin="10,0,0,0"
                           Text="{Binding Description}" 
                           Foreground="White"
                           Style="{StaticResource AppTitleTextStyle}" />
                <TextBlock Grid.Row="2" 
                           Margin="10,0,0,0"
                           Text="{Binding Merchant}" 
                           Foreground="White"
                           Style="{StaticResource AppTitleTextStyle}" />
                <TextBlock Grid.Row="3"
                           Margin="10,0,0,0"
                           Text="{Binding Location}" 
                           Foreground="White"
                           Style="{StaticResource AppTitleTextStyle}" />
                <TextBlock Grid.Row="4"
                           Margin="10,0,0,0"
                           Text="{Binding BilledAmount, Converter={StaticResource DoubleToCurrencyStringConverter}}" 
                           Foreground="White"
                           Style="{StaticResource AppTitleTextStyle}" />
                <StackPanel Grid.Row="5"
                            Margin="10,0,0,0"
                            Orientation="Horizontal">
                    <TextBlock Text="{Binding Category, Converter={StaticResource CategoryToStringConverter}}" 
                               Foreground="White"
                               Style="{StaticResource AppTitleTextStyle}"/>
                    <TextBlock Text="/"
                               Margin="10,0,0,0"
                               Foreground="White"
                               Style="{StaticResource AppTitleTextStyle}"/>
                    <TextBlock Text="{Binding AccountNumber, Converter={StaticResource OtherCategoryToStringConverter}}" 
                               Foreground="White"
                               Style="{StaticResource AppTitleTextStyle}" 
                               Margin="10,0,0,0"/>
                </StackPanel>
                <TextBlock Grid.Row="6"
                           Margin="10,0,0,0"
                           Text="{Binding Notes}" 
                           Foreground="White"
                           Style="{StaticResource AppTitleTextStyle}" />
            </Grid>
        </DataTemplate>
    </Page.Resources>

    <Page.BottomAppBar>
        <AppBar x:Name="ExpenseReportAppBar"  
                IsEnabled="{Binding IsUIEnabled}"
                Background="{StaticResource ItemTemplateBackgroundColor}">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="40*"/>
                    <ColumnDefinition Width="60*"/>
                </Grid.ColumnDefinitions>

                <StackPanel Grid.Column="0" 
                            Orientation="Horizontal" 
                            HorizontalAlignment="Left" 
                            VerticalAlignment="Top">
                    <Button x:Name="AddChargeButton" 
                            Style="{StaticResource AddChargeAppBarButtonStyle}" 
                            Loaded="StartLayoutUpdates"
                            Unloaded="StopLayoutUpdates"
                            Click="AddChargeButton_Click"/>
                    <Button x:Name="RemoveChargeButton" 
                            Style="{StaticResource RemoveChargeAppBarButtonStyle}" 
                            Loaded="StartLayoutUpdates"
                            Unloaded="StopLayoutUpdates"
                            Click="RemoveChargeButton_Click"
                            Visibility="Collapsed"/>
                </StackPanel>
                <StackPanel Grid.Column="1" 
                            Orientation="Horizontal" 
                            HorizontalAlignment="Right" 
                            VerticalAlignment="Top">
                    <Button x:Name="PinReportButton" 
                            Style="{StaticResource PinAppBarButtonStyle}" 
                            Loaded="StartLayoutUpdates"
                            Unloaded="StopLayoutUpdates"
                            Click="PinReportButton_Click"
                            Visibility="Collapsed"/>
                    <Button x:Name="UnpinReportButton" 
                            Style="{StaticResource UnPinAppBarButtonStyle}" 
                            Click="UnpinReportButton_Click"
                            Loaded="StartLayoutUpdates"
                            Unloaded="StopLayoutUpdates"
                            Visibility="Collapsed"/>
                    <Button x:Name="SaveReportButton" 
                            Style="{StaticResource SaveReportAppBarButtonStyle}" 
                            Loaded="StartLayoutUpdates"
                            Unloaded="StopLayoutUpdates"
                            Click="SaveReportButton_Click"/>
                    <Button x:Name="DiscardReportButton" 
                            Style="{StaticResource DiscardReportAppBarButtonStyle}" 
                            Loaded="StartLayoutUpdates"
                            Unloaded="StopLayoutUpdates"
                            Click="DiscardReportButton_Click"/>
                    <Button x:Name="ApproveReportButton" 
                            Style="{StaticResource ApproveAppBarButtonStyle}" 
                            Loaded="StartLayoutUpdates"
                            Unloaded="StopLayoutUpdates"
                            Click="ApproveReportButton_Click"
                            Visibility="Collapsed"/>
                    <Button x:Name="RejectReportButton" 
                            Style="{StaticResource RejectAppBarButtonStyle}" 
                            Click="RejectReportButton_Click"
                            Loaded="StartLayoutUpdates"
                            Unloaded="StopLayoutUpdates"
                            Visibility="Collapsed"/>
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.BottomAppBar>

    <Grid x:Name="LayoutRoot" 
          Background="{StaticResource AppBackgroundColor}">
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Border Background="{StaticResource ItemTemplateBackgroundColor}">
                <Button x:Name="BackButton" 
                        Click="BackButton_Click" 
                        Style="{StaticResource BackButtonStyle}"/>
            </Border>
            <Border Background="{StaticResource ItemTemplateBackgroundColor}"
                    Grid.Column="1" >
                <TextBlock x:Name="PageTitleTextBlock" 
                           Style="{StaticResource PageHeaderTextStyle}"
                           TextWrapping="Wrap"
                           FontSize="44"/>
            </Border>
        </Grid>

        <ProgressRing x:Name="ExpenseReportProgressRing" 
                      Grid.Row="1" 
                      Height="150"
                      Width="150"
                      IsActive="False"/>

        <ScrollViewer x:Name="ItemGridScrollViewer"
                      Grid.Row="1"
                      AutomationProperties.AutomationId="ItemGridScrollViewer"
                      HorizontalScrollBarVisibility="Auto"
                      Style="{StaticResource HorizontalScrollViewerStyle}">

            <StackPanel x:Name="ExpenseReportPageStackPanel" 
                        Grid.Row="1" 
                        Margin="120,25,0,0"
                        Orientation="Horizontal">

                <Grid x:Name ="ExpenseReportGrid" 
                      Grid.Column="0"
                      HorizontalAlignment="Left">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="50" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="30" />
                        <RowDefinition Height="45" />
                        <RowDefinition Height="15" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="30" />
                        <RowDefinition Height="45" />
                        <RowDefinition Height="15" />
                        <RowDefinition Height="30" />
                        <RowDefinition Height="135" />
                        <RowDefinition Height="15" />
                        <RowDefinition Height="30" />
                        <RowDefinition Height="30" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="135" />
                        <ColumnDefinition Width="15" />
                        <ColumnDefinition Width="135" />
                    </Grid.ColumnDefinitions>

                    <TextBlock x:Name="ExpenseItemsErrorTextBlock"  
                               Grid.Row="0" 
                               Grid.Column="0" 
                               Grid.ColumnSpan="3"
                               Text="Add items to the report."
                               HorizontalAlignment="Left"
                               Margin="0,0,0,20"
                               Style="{StaticResource AppTextBlockStyle}"
                               Foreground="Red"
                               Visibility="Collapsed"/>
                    <TextBlock x:Name="ExpenseItemsSummaryTextBlock" 
                               Grid.Row="1" 
                               Grid.Column="0" 
                               Grid.ColumnSpan="3"
                               VerticalAlignment="Top" 
                               Style="{StaticResource AppTextBlockStyle}"
                               FontSize="24"/>
                    
                    <TextBlock x:Name="PurposeErrorTextBlock"  
                               Grid.Row="2" 
                               Grid.Column="0" 
                               Text="Enter a purpose."
                               HorizontalAlignment="Left"
                               Margin="0,15,0,0"
                               Style="{StaticResource AppTextBlockStyle}"
                               Foreground="Red"
                               Visibility="Collapsed"/>
                    <TextBlock Grid.Row="3" 
                               Grid.Column="0" 
                               Text="Purpose:" 
                               VerticalAlignment="Top" 
                               Style="{StaticResource AppTextBlockStyle}"/>
                    <TextBox x:Name="PurposeTextBox" 
                             Grid.Row="4" 
                             Grid.Column="0" 
                             Grid.ColumnSpan="3"
                             Text="{Binding Purpose, Mode=TwoWay}" 
                             Width="285" 
                             Margin="0,10,0,0"
                             Height="30"
                             HorizontalAlignment="Left"
                             VerticalContentAlignment="Top"
                             BorderBrush="{StaticResource ItemTemplateBackgroundColor}"
                             LostFocus="PurposeTextBox_LostFocus"
                             Visibility="Collapsed"/>
                    <TextBlock x:Name="PurposeTextBlock" 
                               Grid.Row="4" 
                               Grid.Column="0" 
                               Grid.ColumnSpan="3"
                               Text="{Binding Purpose}" 
                               Style="{StaticResource AppTitleTextStyle}"
                               Margin="0,10,0,0"
                               HorizontalAlignment="Left"
                               Visibility="Collapsed"/>

                    <TextBlock x:Name="ApproverErrorTextBlock"  
                               Grid.Row="6" 
                               Grid.Column="0" 
                               Grid.ColumnSpan="3"
                               Text="Enter an approver."
                               HorizontalAlignment="Left"
                               Margin="0,15,0,0"
                               Style="{StaticResource AppTitleTextStyle}"
                               Foreground="Red"
                               Visibility="Collapsed"/>
                    <TextBlock Grid.Row="7" 
                               Grid.Column="0" 
                               Text="Approver: " 
                               VerticalAlignment="Top" 
                               Style="{StaticResource AppTextBlockStyle}"/>
                    <TextBox x:Name="ApproverTextBox" 
                             Grid.Row="8" 
                             Grid.Column="0" 
                             Text="{Binding Approver, Mode=TwoWay}" 
                             Height="30"
                             Width="135" 
                             Margin="0,10,0,0"
                             HorizontalAlignment="Left"
                             VerticalContentAlignment="Center"
                             BorderBrush="{StaticResource ItemTemplateBackgroundColor}"
                             LostFocus="ApproverTextBox_LostFocus"
                             Visibility="Collapsed"/>
                    <TextBlock x:Name="ApproverTextBlock" 
                               Grid.Row="8" 
                               Grid.Column="0" 
                               Text="{Binding Approver}" 
                               Style="{StaticResource AppTitleTextStyle}"
                               Margin="0,10,0,0"
                               HorizontalAlignment="Left"
                               Visibility="Collapsed"/>

                    <TextBlock x:Name="CostCenterErrorTextBlock"  
                               Grid.Row="6" 
                               Grid.Column="0" 
                               Grid.ColumnSpan="3"
                               Text="Enter a cost center."
                               HorizontalAlignment="Left"
                               Margin="0,15,0,0"
                               Style="{StaticResource AppTitleTextStyle}"
                               Foreground="Red"
                               Visibility="Collapsed"/>
                    <TextBlock Grid.Row="7" 
                               Grid.Column="2" 
                               Text="Cost Center: " 
                               HorizontalAlignment="Left"
                               VerticalAlignment="Top" 
                               Style="{StaticResource AppTextBlockStyle}"/>
                    <TextBox x:Name="CostCenterTextBox" 
                             Grid.Row="8" 
                             Grid.Column="2" 
                             Text="{Binding CostCenter, Mode=TwoWay}" 
                             Height="30"
                             Width="135" 
                             Margin="0,10,0,0"
                             HorizontalAlignment="Left"
                             VerticalContentAlignment="Center"
                             BorderBrush="{StaticResource ItemTemplateBackgroundColor}"
                             LostFocus="CostCenterTextBox_LostFocus"
                             Visibility="Collapsed"/>
                    <TextBlock x:Name="CostCenterTextBlock" 
                               Grid.Row="8" 
                               Grid.Column="2" 
                               Text="{Binding CostCenter}" 
                               Style="{StaticResource AppTitleTextStyle}"
                               Margin="0,10,0,0"
                               HorizontalAlignment="Left"
                               Visibility="Collapsed"/>

                    <TextBlock Grid.Row="10" 
                               Grid.Column="0" 
                               Text="Notes:" 
                               VerticalAlignment="Top" 
                               Style="{StaticResource AppTextBlockStyle}"/>
                    <TextBox x:Name="NotesTextBox" 
                             Grid.Row="11" 
                             Grid.Column="0" 
                             Grid.ColumnSpan="3"
                             Text="{Binding Notes, Mode=TwoWay}" 
                             Width="285" 
                             Height="130"
                             HorizontalAlignment="Left"
                             VerticalContentAlignment="Center"
                             BorderBrush="{StaticResource ItemTemplateBackgroundColor}"
                             Visibility="Collapsed"/>
                    <TextBlock x:Name="NotesTextBlock" 
                               Grid.Row="11" 
                               Grid.Column="0" 
                               Grid.ColumnSpan="3"
                               Text="{Binding Notes}" 
                               Style="{StaticResource AppTitleTextStyle}"
                               Margin="0,10,0,0"
                               HorizontalAlignment="Left"
                               Visibility="Collapsed"/>

                    <StackPanel Grid.Row="13" 
                                Grid.Column="0" 
                                Grid.ColumnSpan="3"
                                Orientation="Horizontal">
                        <TextBlock x:Name="OwedToEmployeeTextBlock" 
                                   FontSize="18" 
                                   Margin="0,10,0,0"
                                   HorizontalAlignment="Left" 
                                   VerticalAlignment="Top" 
                                   Style="{StaticResource AppTextBlockStyle}"/>
                        <TextBlock Text="owed to employee" 
                                   FontSize="18" 
                                   Margin="5,10,0,0" 
                                   HorizontalAlignment="Left" 
                                   VerticalAlignment="Top" 
                                   Style="{StaticResource AppTextBlockStyle}"/>
                    </StackPanel>
                    
                    <StackPanel Grid.Row="14" 
                                Grid.Column="0" 
                                Grid.ColumnSpan="3"
                                Orientation="Horizontal">
                        <TextBlock x:Name="OwedToCreditCardTextBlock" 
                                   FontSize="18" 
                                   Margin="0,10,0,0"
                                   HorizontalAlignment="Left" 
                                   VerticalAlignment="Top" 
                                   Style="{StaticResource AppTextBlockStyle}"/>
                        <TextBlock Text="owed to credit card" 
                                   FontSize="18" 
                                   Margin="5,10,0,0" 
                                   HorizontalAlignment="Left" 
                                   VerticalAlignment="Top" 
                                   Style="{StaticResource AppTextBlockStyle}"/>
                    </StackPanel>
                </Grid>

                <GridView x:Name="ExpenseItemsGridView"
                          Margin="50,5,0,0"
                          ItemsSource="{Binding Source={StaticResource ExpenseItemsViewSource}}"
                          ItemTemplate="{StaticResource ExpenseItemTemplate}"
                          SelectionMode="Multiple"
                          SelectionChanged="ExpenseItemsGridView_SelectionChanged"
                          IsSwipeEnabled="True"
                          IsItemClickEnabled="True"
                          ItemClick="ExpenseItemsGridView_ItemClick">
                    <GridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapGrid Orientation="Vertical"/>
                        </ItemsPanelTemplate>
                    </GridView.ItemsPanel>
                </GridView>

                <ListView x:Name="ExpenseItemsListView"
                  AutomationProperties.AutomationId="ExpenseReportsListView"
                  AutomationProperties.Name="Grouped Items"
                  Grid.Row="1"
                  Width="300"
                  Visibility="Collapsed"
                  Margin="15,0,0,0"
                  ItemsSource="{Binding Source={StaticResource ExpenseItemsViewSource}}"
                  ItemTemplate="{StaticResource ExpenseItemSnappedTemplate}"
                  SelectionMode="Multiple"
                  IsSwipeEnabled="True"
                  IsItemClickEnabled="True"
                  ItemClick="ExpenseItemsGridView_ItemClick">
                </ListView>

            </StackPanel>
        </ScrollViewer>

        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape"/>
                <VisualState x:Name="Filled"/>

                <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemGridScrollViewer" 
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="{StaticResource VerticalScrollViewerStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpenseReportPageStackPanel" 
                                                       Storyboard.TargetProperty="Orientation">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="Vertical"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpenseReportPageStackPanel" 
                                                       Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="100,25,0,0"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpenseReportGrid" 
                                                       Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="20,0,0,0"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpenseItemsGridView" 
                                                       Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="0,25,0,0"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!-- The back button and title have different styles when snapped -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemGridScrollViewer" 
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="{StaticResource VerticalScrollViewerStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackButton" 
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="{StaticResource SnappedBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PageTitleTextBlock" 
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PageTitleTextBlock" 
                                                       Storyboard.TargetProperty="FontSize">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="20"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PageTitleTextBlock" 
                                                       Storyboard.TargetProperty="FontWeight">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="SemiBold"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpenseReportPageStackPanel" 
                                                       Storyboard.TargetProperty="Orientation">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="Vertical"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpenseReportPageStackPanel" 
                                                       Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="15,25,0,0"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpenseReportGrid" 
                                                       Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="0,10,0,0"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpenseItemsSummaryTextBlock" 
                                                       Storyboard.TargetProperty="FontSize">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="20"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpenseItemsGridView" 
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpenseItemsListView" 
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpenseItemsListView" 
                                                       Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="-20,20,0,0"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</common:LayoutAwarePage>
